<template>
  <div id="login">
    <h2>登录/注册</h2>
    <p>注册即送2600元新人红包</p>
    <div>
      <span class="reg" :class="show?'showfalse':''">手机号有误，请重新输入</span>
      <van-cell-group>
        <van-field v-model="value2" clearable :placeholder="phone" @blur="write" @click="reset" />
      </van-cell-group>
    </div>
    <div class="random">
      <span :class="!isok1?'regran':''">验证码输入错误，请重新输入</span>
      <input type="text" @blur="random" v-model="value1" placeholder="验证码" />
      <p>验证码：</p>
      <div @click="changenum">{{num}}</div>
    </div>
    <div class="register" 
      :class="isok&&isok1&&value1.length>3?'regok':''"
      @click="send"
    >
      <i class="el-icon-right"></i>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Field, CellGroup } from "vant";

Vue.use(Field);
Vue.use(CellGroup);
export default {
  data() {
    return {
      value1: "",
      value2: "",
      phone: "手机号",
      show: false,
      isok: false,
      num: 0,
      arr: [],
      isok1: true,
    };
  },
  methods: {
    write() {
      this.phone = "手机号";
      let phone = this.value2;
      if (!/^1[3456789]\d{9}$/.test(phone)) {
        this.show = true;
        this.isok = false;
      } else {
        this.isok = true;
      }
    },
    reset() {
      this.phone = "";
      this.show = false;
    },
    changenum() {
      let str = "";
      for (var i = 0; str.length < 4; i++) {
        var x = parseInt(Math.random() * (61 + 1));
        if (str.indexOf(this.arr[x]) == -1) {
          str += this.arr[x];
        }
      }
      this.num = str;
    },
    random() {
      if (this.value1.toUpperCase() == this.num.toUpperCase()) {
        this.isok1 = true;
      } else {
        this.isok1 = false;
      }
    },
    send(){
      console.log(this.isok)
      console.log(this.isok1)
      console.log(this.value1.length)
      if(this.isok&&this.isok1&&this.value1.length>3){
        console.log('qqq')
      }else{
        console.log(111)
      }
    }
  },
  created() {
    for (var i = 48; i <= 57; i++) {
      this.arr.push(String.fromCharCode(i));
    }
    for (var i = 65; i <= 90; i++) {
      this.arr.push(String.fromCharCode(i));
    }
    for (var i = 97; i <= 122; i++) {
      this.arr.push(String.fromCharCode(i));
    }
    for (var i = 0, str = ""; str.length < 4; i++) {
      var x = parseInt(Math.random() * (61 + 1));
      if (str.indexOf(this.arr[x]) == -1) {
        str += this.arr[x];
      }
    }
    this.num = str;
  },
};
</script>

<style lang="scss" scoped>
@import url("../assets/css/login.css");
</style>